<template>
  <div class="bao">
    <!-- 新增职位 -->
    <div class="zwei"
         v-show="showModal">
      <div class='Newjob_bg '
           id='coverBox'>
        <div class='Newjob_box'>
          <el-form ref="Newjob"
                   :model="Newjob"
                   label-width="80px">
            <el-form-item>
              <el-col :span="11">
                <el-form-item label="职位名称">
                  <el-input v-model="Newjob.PositionName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="薪资待遇">
                  <el-input v-model="Newjob.Money"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="11">
                <el-form-item label="工作地点">
                  <el-select v-model="Newjob.Area"
                             placeholder="请选择活动区域"
                             style='width:100%;'>
                    <el-option label="深圳"
                               value="深圳"></el-option>
                    <el-option label="东莞"
                               value="东莞"></el-option>
                    <el-option label="苏州"
                               value="苏州"></el-option>
                    <el-option label="赣州"
                               value="赣州"></el-option>
                    <el-option label="越南"
                               value="越南"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="工作经验">
                  <el-input v-model="Newjob.Exp"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="11">
                <el-form-item label="学历">
                  <!-- <el-input v-model="Newjob.Education"></el-input> -->
                  <el-select v-model="Newjob.Education"
                             placeholder="请选择学历"
                             style='width:100%;'>
                    <el-option label="中专及以下"
                               value="中专及以下"></el-option>
                    <el-option label="大专"
                               value="大专"></el-option>
                    <el-option label="本科及以上"
                               value="本科及以上"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="人数">
                  <el-input v-model="Newjob.PersonNum"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-col :span="11">
                <el-form-item label="职位部门">
                  <el-input v-model="Newjob.tOrg"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="职位BU">
                  <!-- <el-input v-model="Newjob.Education"></el-input> -->
                  <el-select v-model="Newjob.tBU"
                             placeholder="请选择BU"
                             style='width:100%;'>
                    <el-option label="SBU"
                               value="SBU"></el-option>
                    <el-option label="IBU"
                               value="IBU"></el-option>
                    <el-option label="EBU"
                               value="EBU"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <!-- 11 -->
            <el-form-item>
              <el-col :span="11">
                <el-form-item label="福利待遇"
                              style='width:100%;'>
                  <el-checkbox-group v-model="Newjob.Tips">
                    <el-checkbox label="五险一金"
                                 name="Tips1"
                                 checked></el-checkbox>
                    <el-checkbox label="绩效奖金"
                                 name="Tips2"
                                 checked></el-checkbox>
                    <el-checkbox label="定期体检"
                                 name="Tips3"
                                 checked></el-checkbox>
                    <el-checkbox label="年终奖金"
                                 name="Tips4"
                                 checked></el-checkbox>
                    <el-checkbox label="包住宿"
                                 name="Tips5"
                                 checked></el-checkbox>
                    <el-checkbox label="带薪年假"
                                 name="Tips6"
                                 checked></el-checkbox>
                    <el-checkbox label="加班补贴"
                                 name="Tips7"
                                 checked></el-checkbox>
                    <el-checkbox label="免费班车"
                                 name="Tips8"
                                 checked></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="岗位等级">
                  <el-select v-model="Newjob.PositionLevel"
                             placeholder="请选择招聘岗位等级"
                             style='width:100%;'>
                    <el-option label="工程师级"
                               value="1"></el-option>
                    <el-option label="课长级"
                               value="2"></el-option>
                    <el-option label="经理级"
                               value="3"></el-option>
                    <el-option label="总监及以上"
                               value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="工作详情">
              <el-input type="textarea"
                        v-model="Newjob.WorkDetail"></el-input>

            </el-form-item>
            <el-form-item label="福利待遇">
              <el-input type="textarea"
                        v-model="Newjob.Welfare"></el-input>
            </el-form-item>
            <el-form-item style="text-align:center">
              <el-button type="primary"
                         @click="CreateNewJob">提交</el-button>
              <el-button @click="getBack">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 侧边栏 -->
    <!-- <div class="sidebar">
      <div class="side-top"
           @click=" ltop()">回到顶部</div>
      <div class="side-bom"
           @click="showModal=true">发布职位</div>
    </div> -->
    <!-- 导航 -->
    <div class="nav">
      <!-- 导航版心 -->
      <div class="nav-c">
        <!-- 版心左 -->
        <div class="nav-c-lt">
          <span class="logo"><img src="@/assets/img/1.png"
                 alt=""></span>
          <p class="wenhua">做行业先锋,创世界品牌</p>
        </div>
        <!-- 版心右 -->
        <div class="nav-c-rt">
          <!-- <div class="aniu">登录</div> -->
          <div class="aniu"
               @click=" ltop()">回到顶部</div>
          <div class="aniu anius"
               @click="showModal=true">发布职位</div>
        </div>
      </div>
    </div>
    <!-- 锚点定位 -->
    <!-- <div id="ding"></div> -->
    <!-- 背景 -->
    <div class="bg">
      <img src="@/assets/img/2.png"
           alt="">
    </div>
    <!-- 分类 -->
    <!-- <div class="fenlei">
      <div class="fenlei-c">
        <div class="f-l-zw"><a @click="ltop">职位:&nbsp;&nbsp;</a><span>1</span> &nbsp;&nbsp;<span>2</span> &nbsp;&nbsp;<span>3</span> &nbsp;&nbsp;<span>4</span> &nbsp;&nbsp;<span>5</span>&nbsp;&nbsp;<span>6</span></div>
      </div>
    </div> -->
    <div class="fenlei">
      <div class="fenlei-c">
        <div class="f-l-zw">
          <!-- <el-autocomplete v-model="state"
                           :fetch-suggestions="querySearchAsync"
                           placeholder="请输入内容"
                           @select="handleSelect"
                           size="small"></el-autocomplete> -->
        </div>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="
                box">
      <!-- 引入ele组件库的card组件加入移入移出事件 -->
      <el-card class="box-card"
               style='width:100%'
               v-for="(item,index) in arr"
               :key="item.id"
               @click.native="tiaozhuan(item.Id)">
        <!-- 申请职位 -->
        <div class="shenqing"
             ref="shenqing">申请职位</div>
        <!-- 头部 -->
        <div class="header">
          <div class="h-lt">
            <span class="mingcheng">{{item.PositionName}}</span>
            <span class="shijian">{{item.CreateTime.substr(0,10)}}发布</span>
          </div>
          <div class="h-rt">
            <div class="gongsi"
                 @click.stop="dianji(index)">深圳欧陆通电子股份有限公司</div>
          </div>

        </div>
        <!-- 中心 -->
        <div class="center">
          <div class="c-lt">
            <span class="gongzi">{{item.Money}}</span>
            <span class="miaoshu">{{item.PositionName}}&nbsp;|&nbsp;{{item.Area}}&nbsp;|&nbsp;{{item.Exp}}&nbsp;|&nbsp;{{item.Education}}&nbsp;|&nbsp;招{{item.PersonNum}}人<span class="xs">&nbsp;|&nbsp;{{item.CreateTime.substr(0,10)}}发布</span></span>
          </div>
          <div class="c-rt">
            <div class="guimo"
                 ref="guimo">
              民营公司&nbsp;|&nbsp;1000-5000人
            </div>
          </div>
        </div>
        <div class="f-sm">
          <!-- 小屏幕 -->
          <div class="sm">{{item.CreateTime.substr(0,10)}}发布</div>
          <div class="money">{{item.Money}}</div>
        </div>
        <!-- cookie -->
        <!-- 底部 -->
        <div class="footer">
          <div class="f-lt">
            <div class="hezi"
                 v-for="(item1,index1) in item.Tips.split(',')"
                 :key=index1>{{item1}}</div>
            <!-- <div class="hezi">五险一金</div>
            <div class="hezi">员工旅游</div>
            <div class="hezi">绩效奖金</div>
            <div class="hezi">年终奖金</div>
            <div class="hezi">定期体检</div>
            <div class="hezi">餐饮补贴</div>
            <div class="hezi">通讯补贴</div> -->
          </div>
          <div class="f-rt">
            <div class="jishu"
                 ref="jishu">电子技术/半导体/集成电路</div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 底部按钮 -->
    <div class="btn">
      <div class="btn-c">
        <el-button-group>
          <el-button icon="el-icon-caret-left"
                     size="small"
                     @click="homepage">首页</el-button>
          <el-button icon="el-icon-arrow-left"
                     size="small"
                     @click="previouspage">上一页</el-button>
          <el-button size="small"
                     @click="nextpage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
          <el-button size="small"
                     @click="lastpage">尾页<i class="el-icon--right el-icon-caret-right"></i></el-button>
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script>
// 导入uri
import uri from "@/config/uri";
export default {
  data () {
    return {
      showModal: false,
      Newjob: {
        PositionName: '',
        Money: '',
        Area: '',
        Exp: '',
        Education: '',
        PersonNum: '',
        WorkDetail: '',
        Welfare: '',
        Tips: [],
        PositionLevel: '',
        tOrg: '',
        tBU: ''
      },
      // 模糊搜索所需要数据
      restaurants: [],
      state: '',
      timeout: null,
      // 默认工作列表为空对象
      arr: [],
      // tips: [],
      date: {}
    }
  },
  created () {
    // console.log(cookie)
    let data = { pageindex: 1, pagesize: 10, HRJobNo: document.cookie.split('|')[1].split(';')[0].split('=')[1] }
    this.$http.post(uri.getInfoList, data).then((res) => {
      // console.log(res)
      this.arr = res.data.Items
      this.date = res.data
      // this.tips = this.arr.Tips.split(',')
      // console.log(this.arr)
    })
  },
  // filters: {
  //   // 处理时间戳
  //   parseTime (timestamps) {
  //     // 语法：moment(时间戳).format(格式化)
  //     return moment(timestamps * 1000).format("YYYY-MM-DD");
  //   },
  // },
  methods: {
    // 首页
    homepage () {
      this.date.CurrentPage = 1
      this.arr = []
      let data = { pageindex: this.date.CurrentPage, pagesize: 10 }
      this.$http.post(uri.getInfoList, data).then((res) => {
        console.log(res)
        this.arr = res.data.Items
        // this.tips = this.arr.Tips.split(",")
        // console.log(this.arr)
      })

    },
    // 上一页
    previouspage () {
      if (this.date.CurrentPage > 1) {
        this.date.CurrentPage--
        this.arr = []
        let data = { pageindex: this.date.CurrentPage, pagesize: 10 }
        this.$http.post(uri.getInfoList, data).then((res) => {
          this.arr = res.data.Items
          // this.tips = this.arr.Tips.split(",")
          // console.log(this.arr)
        })
      }
    },
    // 下一页
    nextpage () {
      if (this.date.CurrentPage < this.date.TotalPages) {
        this.date.CurrentPage++
        this.arr = []
        let data = { pageindex: this.date.CurrentPage, pagesize: 10 }
        this.$http.post(uri.getInfoList, data).then((res) => {

          this.arr = res.data.Items
          // this.tips = this.arr.Tips.split(",")
          // console.log(this.arr)
        })
      } else {

      }
    },
    // 末页
    lastpage () {
      this.date.CurrentPage = this.date.TotalPages
      this.arr = []
      // console.log(arr)
      let data = { pageindex: this.date.CurrentPage, pagesize: 10 }
      this.$http.post(uri.getInfoList, data).then((res) => {
        console.log(res)
        this.arr = res.data.Items
        // this.tips = this.arr.Tips.split(",")
        // console.log(this.arr)
      })
    },
    getBack () {
      // var coverBox = document.getElementById('coverBox');
      this.Newjob.PositionName = ''
      this.Newjob.Money = ''
      this.Newjob.Area = ''
      this.Newjob.Exp = ''
      this.Newjob.Education = ''
      this.Newjob.PersonNum = ''
      this.Newjob.WorkDetail = ''
      this.Newjob.Welfare = ''
      this.Newjob.tOrg = ''
      this.Newjob.tBU = ''
      this.Newjob.PositionLevel = ''
      this.showModal = false
    },
    CreateNewJob () {
      let NewjobS = new FormData();

      NewjobS.append('PositionName', this.Newjob.PositionName);
      NewjobS.append('Money', this.Newjob.Money);
      NewjobS.append('Area', this.Newjob.Area);
      NewjobS.append('Exp', this.Newjob.Exp);
      NewjobS.append('Education', this.Newjob.Education);
      NewjobS.append('PersonNum', this.Newjob.PersonNum);
      NewjobS.append('WorkDetail', this.Newjob.WorkDetail);
      NewjobS.append('Welfare', this.Newjob.Welfare);
      NewjobS.append('Tips', this.Newjob.Tips);
      NewjobS.append('tOrg', this.Newjob.tOrg);
      NewjobS.append('tBU', this.Newjob.tBU);
      NewjobS.append('PositionLevel', this.Newjob.PositionLevel);
      NewjobS.append('HRJobNo', document.cookie.split('|')[1].split(';')[0].split('=')[1]);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",

        }
      };
      this.$http.post(uri.SaveInfo, NewjobS, config).then(res => {
        console.log(res)
        if (res.status == "200") {
          this.$message({
            message: "提交成功",
            type: "success"
          });
        }
      });
      this.$router.go(0)
      // this.showModal = false
      // cookie
    },
    yiru (index) {
      // 通过ref获取dom节点
      this.$refs.guimo[index].style.display = 'none'
      this.$refs.jishu[index].style.display = 'none'
      this.$refs.shenqing[index].style.display = 'block'
    },
    yichu (index) {
      // 通过ref获取dom节点
      this.$refs.guimo[index].style.display = 'block'
      this.$refs.jishu[index].style.display = 'block'
      this.$refs.shenqing[index].style.display = 'none'
    },
    tiaozhuan (id) {
      // 点击跳转
      // this.$router.push("/detail/");
      let routeData = this.$router.resolve({
        path: "/admindetail/",
        query: {
          id: id
        }
      });
      //必要操作，否则不会打开新页面
      window.open(routeData.href, '_blank');
    },
    dianji (index) {
      // 点击跳转
      // this.$router.push("/company/");
      let routeData = this.$router.resolve({
        path: "/company/",
        query: {
          id: index
        }
      });
      // split
      //必要操作，否则不会打开新页面
      window.open(routeData.href, '_blank');
    },
    ltop () {
      let timer = setInterval(function () {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-scrollTop / 6);
        if (scrollTop == 0) {
          clearInterval(timer);
        }
        document.documentElement.scrollTop = document.body.scrollTop = scrollTop + ispeed;
      }, 30)
    },
    loadAll () {
      return [
        { "value": "阳阳麻辣烫", "address": "天山西路389号" },
        { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
      ];
    },
    querySearchAsync (queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      // state
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 100 * Math.random());
    },
    createStateFilter (queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect (item) {
      console.log(item);
    }
  },
  mounted () {
    this.restaurants = this.loadAll();
  }
}

</script>

<style scoped>
/* pc端 */
@media only screen and (min-width: 1200px) {
  .f-sm {
    display: none;
  }
  body {
    overflow: hidden;
  }
  div {
    overflow: hidden;
  }
  .sm {
    display: none;
  }
  .box {
    width: 50%;
    margin: 0 auto;
    margin-top: 96px;
    margin-bottom: 15px;
    min-width: 1200px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }
  .header,
  .center,
  .footer {
    height: 30px;
  }
  .center {
    padding: 10px 0 10px;
  }
  .box-card {
    margin-bottom: 8px;
    position: relative;
    cursor: pointer;
  }
  .h-lt,
  .c-lt,
  .f-lt,
  .hezi {
    float: left;
  }
  .h-rt,
  .c-rt,
  .f-rt {
    float: right;
  }
  .h-lt .mingcheng {
    color: #0058a6;
    font-size: 16px;
  }
  .h-lt .shijian {
    color: #999;
    font-size: 14px;
    margin-left: 8px;
  }
  .h-rt .gongsi {
    color: #0058a6;
    font-size: 16px;
  }
  .c-lt .gongzi {
    font-size: 16px;
    color: #ff6000;
    margin-right: 16px;
  }
  .c-lt .miaoshu {
    max-width: 600 px;
    font-size: 14px;
    color: #666;
  }
  .c-rt .guimo {
    font-size: 14px;
    color: #666;
  }
  .f-lt .hezi {
    font-size: 12px;
    color: #999;
    height: 18px;
    border: 1px solid #eee;
    margin-right: 8px;
    padding: 0 8px;
  }
  .f-rt .jishu {
    font-size: 14px;
    color: #999;
  }
  .f-rt,
  .f-lt {
    margin-top: 5px;
  }
  .shenqing {
    position: absolute;
    width: 60px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    margin: 0;
    padding: 0 16px;
    background-color: #ff6000;
    bottom: 20px;
    right: 20px;
    color: #fff;
    border-radius: 3px;
    display: none;
  }
  .nav {
    height: 56px;
    line-height: 56px;
    width: 100%;
    background: #9dd8f7;
    position: fixed;
    z-index: 10;
  }
  .nav-c {
    min-width: 1200px;
    width: 50%;
    margin: 0 auto;
    height: 100%;
  }
  .nav-c-lt {
    height: 56px;
    float: left;
  }
  .wenhua {
    height: 56px;
    line-height: 56px;
    font-family: FangSong;
    color: #666;
    font-weight: 800;
    font-style: italic;
    font-size: 20px;
    margin: 0;
    float: left;
    margin-left: 5px;
  }
  .logo {
    float: left;
    height: 56px;
  }
  .logo img {
    margin-top: 5px;
  }
  /* .bg {
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: -1;
}
.bg img {
  width: 100%;
  height: 100%;
} */
  .bg {
    height: 200px;
    width: 100%;
    position: fixed;
    top: 56px;
    left: 0;
    background: #999;
    z-index: -1;
  }
  .bg img {
    width: 100%;
    height: 100%;
  }
  .fenlei {
    height: 40px;
    width: 100%;
    position: fixed;
    top: 56px;
    z-index: 10;
  }
  .fenlei-c {
    margin: 0 auto;
    min-width: 1200px;
    width: 50%;
    background: #b1e3fe;
    top: 100%;
    height: 40px;
  }
  .f-l-zw {
    margin-left: 23px;
    float: right;
    margin-right: 5px;
    line-height: 39px;
  }
  .f-l-zw a {
    text-decoration: none;
    color: blue;
    font-size: 14px;
  }
  .f-l-zw span {
    font-size: 12px;
  }
  .btn {
    width: 100%;
    height: 60px;
  }
  .btn-c {
    margin: 0 auto;
    min-width: 1200px;
    width: 50%;
    top: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
  .bao {
    padding-bottom: 55px;
  }
  .nav-c-rt {
    height: 56px;
    float: right;
    margin-right: 1px;
  }
  .aniu {
    border: 1px solid #b3d8ff;
    color: #409eff;
    background: #ecf5ff;
    height: 30px;
    width: 70px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    margin: 13px 6px 0 0;
    float: right;
  }
  .aniu1 {
    border: 1px solid #b3d8ff;
    color: #409eff;
    background: #ecf5ff;
    height: 30px;
    width: 70px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    margin: 13px 6px 0 0;
    float: right;
  }
  .aniu:hover {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
  .aniu1:hover {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
  .side-top {
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    color: #409eff;
    background: #ecf5ff;
  }
  .side-top:hover {
    color: #fff;
    background-color: #409eff;
  }
  .sidebar {
    position: fixed;
    height: 52px;
    width: 50px;
    bottom: 160px;
    right: 30px;
    border: 1px solid #b3d8ff;
  }
  .Newjob_bg {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 30;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .Newjob_box {
    overflow: auto;
    position: fixed;
    top: 12%;
    left: 10%;
    z-index: 11;
    background-color: rgba(255, 255, 255);
    padding: 50px 100px;
  }
  .upload-demo {
    margin-bottom: 10px;
  }
  .active {
    display: block;
  }
}
/* pad端 */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  body {
    overflow: hidden;
  }
  div {
    overflow: hidden;
  }
  .sm {
    display: none;
  }
  .box {
    width: 100%;
    margin: 0 auto;
    margin-top: 96px;
    /* margin-bottom: 15px; */
    /* min-width: 1200px; */
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }
  .header,
  .center,
  .footer {
    height: 30px;
  }
  .center {
    padding: 10px 0 10px;
  }
  .box-card {
    margin-bottom: 8px;
    position: relative;
    cursor: pointer;
  }
  .h-lt,
  .c-lt,
  .f-lt,
  .hezi {
    float: left;
  }
  .h-rt,
  .c-rt,
  .f-rt {
    float: right;
  }
  .h-lt .mingcheng {
    color: #0058a6;
    font-size: 16px;
  }
  .h-lt .shijian {
    color: #999;
    font-size: 14px;
    margin-left: 8px;
  }
  .h-rt .gongsi {
    color: #0058a6;
    font-size: 16px;
  }
  .c-lt .gongzi {
    font-size: 16px;
    color: #ff6000;
    margin-right: 16px;
  }
  .c-lt .miaoshu {
    max-width: 600 px;
    font-size: 14px;
    color: #666;
  }
  .c-rt .guimo {
    font-size: 14px;
    color: #666;
  }
  .f-lt .hezi {
    font-size: 12px;
    color: #999;
    height: 18px;
    border: 1px solid #eee;
    margin-right: 8px;
    padding: 0 8px;
  }
  .f-rt .jishu {
    font-size: 14px;
    color: #999;
  }
  .f-rt,
  .f-lt {
    margin-top: 5px;
  }
  .shenqing {
    position: absolute;
    width: 60px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    margin: 0;
    padding: 0 16px;
    background-color: #ff6000;
    bottom: 20px;
    right: 20px;
    color: #fff;
    border-radius: 3px;
    display: none;
  }
  .nav {
    height: 56px;
    line-height: 56px;
    width: 100%;
    background: #9dd8f7;
    position: fixed;
    z-index: 10;
  }
  .nav-c {
    /* min-width: 1200px; */
    width: 100%;
    margin: 0 auto;
    height: 100%;
  }
  .nav-c-lt {
    height: 56px;
    float: left;
  }
  .wenhua {
    height: 56px;
    line-height: 56px;
    font-family: FangSong;
    color: #666;
    font-weight: 800;
    font-style: italic;
    font-size: 20px;
    margin: 0;
    float: left;
    margin-left: 5px;
  }
  .logo {
    float: left;
    height: 56px;
  }
  .logo img {
    margin-top: 5px;
  }
  /* .bg {
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: -1;
}
.bg img {
  width: 100%;
  height: 100%;
} */
  .bg {
    height: 200px;
    width: 100%;
    position: fixed;
    top: 56px;
    left: 0;
    background: #999;
    z-index: -1;
  }
  .bg img {
    width: 100%;
    height: 100%;
  }
  .fenlei {
    height: 40px;
    width: 100%;
    position: fixed;
    top: 56px;
    z-index: 10;
  }
  .fenlei-c {
    margin: 0 auto;
    /* min-width: 1200px; */
    width: 100%;
    background: #b1e3fe;
    top: 100%;
    height: 40px;
  }
  .f-l-zw {
    margin-left: 23px;
    float: right;
    margin-right: 5px;
    line-height: 39px;
  }
  .f-l-zw a {
    text-decoration: none;
    color: blue;
    font-size: 14px;
  }
  .f-l-zw span {
    font-size: 12px;
  }
  .btn {
    width: 100%;
    height: 60px;
  }
  .btn-c {
    margin: 0 auto;
    /* min-width: 1200px; */
    width: 100%;
    top: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
  .bao {
    padding-bottom: 15px;
  }
  .nav-c-rt {
    height: 56px;
    float: right;
    margin-right: 1px;
  }
  .aniu {
    border: 1px solid #b3d8ff;
    color: #409eff;
    background: #ecf5ff;
    height: 30px;
    width: 70px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    margin: 13px 6px 0 0;
    float: right;
    display: none;
  }
  .aniu1 {
    border: 1px solid #b3d8ff;
    color: #409eff;
    background: #ecf5ff;
    height: 30px;
    width: 70px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    margin: 13px 6px 0 0;
    float: right;
  }
  .aniu:hover {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
  .aniu1:hover {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
  .side-top {
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    color: #409eff;
    background: #ecf5ff;
  }
  .side-top:hover {
    color: #fff;
    background-color: #409eff;
  }
  .sidebar {
    position: fixed;
    height: 52px;
    width: 50px;
    bottom: 160px;
    right: 30px;
    border: 1px solid #b3d8ff;
  }
  .Newjob_bg {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 30;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .Newjob_box {
    overflow: auto;
    position: fixed;
    top: 12%;
    left: 20%;
    z-index: 11;
    background-color: rgba(255, 255, 255);
    padding: 50px 100px;
  }
  .upload-demo {
    margin-bottom: 10px;
  }
  .active {
    display: block;
  }
  .f-sm {
    display: none;
  }
}
/* 手机端 */
@media only screen and (max-width: 767px) {
  .xs {
    display: none;
  }
  body {
    overflow: hidden;
  }
  div {
    overflow: hidden;
  }
  .box {
    width: 100%;
    margin: 0 auto;
    margin-top: 96px;
    /* margin-bottom: 15px; */
    /* min-width: 1200px; */
  }
  .text {
    font-size: 14px;
  }
  /* .c-lt */
  /* footer */
  .item {
    padding: 18px 0;
  }
  .header,
  .center {
    height: 30px;
  }
  .center {
    /* padding: 10px 0 10px; */
    height: 30px;
    line-height: 30px;
  }
  .c-lt {
    height: 25px;
    margin-bottom: 10px;
  }
  .box-card {
    margin-bottom: 8px;
    position: relative;
    cursor: pointer;
  }
  .footer {
    display: none;
  }
  .h-lt,
  .f-lt,
  .hezi {
    float: left;
  }

  .h-rt,
  .c-rt,
  .f-rt {
    float: right;
  }
  .h-lt .mingcheng {
    color: #0058a6;
    font-size: 14px;
  }
  .h-lt .shijian {
    color: #999;
    font-size: 12px;
    margin-left: 8px;
    display: none;
  }
  .h-rt .gongsi {
    color: #0058a6;
    font-size: 12px;
    height: 19px;
    margin-top: 3px;
  }
  .c-lt .gongzi {
    font-size: 12px;
    color: #ff6000;
    margin-right: 16px;
    height: 25px;
    float: left;
    display: none;
  }
  .c-lt .miaoshu {
    font-size: 12px;
    color: #666;
    display: block;
    height: 25px;
    float: left;
  }
  .c-rt .guimo {
    font-size: 12px;
    color: #666;
    display: none;
  }
  .f-lt .hezi {
    font-size: 12px;
    color: #999;
    height: 18px;
    border: 1px solid #eee;
    margin-right: 8px;
    padding: 0 8px;
    display: none;
  }
  .f-rt .jishu {
    font-size: 14px;
    color: #999;
    display: none;
  }
  .f-rt,
  .f-lt {
    margin-top: 5px;
  }
  .shenqing {
    position: absolute;
    width: 0px;
    height: 0px;
    display: none;
  }
  .nav {
    height: 56px;
    line-height: 56px;
    width: 100%;
    background: #9dd8f7;
    position: fixed;
    z-index: 10;
  }
  .nav-c {
    /* min-width: 1200px; */
    width: 100%;
    margin: 0 auto;
    height: 100%;
  }
  .nav-c-lt {
    height: 56px;
    float: left;
    width: 200px;
  }
  .wenhua {
    height: 56px;
    line-height: 56px;
    font-family: FangSong;
    color: #666;
    font-weight: 800;
    font-style: italic;
    font-size: 20px;
    margin: 0;
    float: left;
    margin-left: 5px;
  }
  .logo {
    float: left;
    height: 56px;
  }
  .logo img {
    margin-top: 5px;
  }
  /* .bg {
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: -1;
}
.bg img {
  width: 100%;
  height: 100%;
} */
  .bg {
    height: 200px;
    width: 100%;
    position: fixed;
    top: 56px;
    left: 0;
    background: #999;
    z-index: -1;
  }
  .bg img {
    width: 100%;
    height: 100%;
  }
  .fenlei {
    height: 40px;
    width: 100%;
    position: fixed;
    top: 56px;
    z-index: 10;
  }
  .fenlei-c {
    margin: 0 auto;
    /* min-width: 1200px; */
    width: 100%;
    background: #b1e3fe;
    top: 100%;
    height: 40px;
  }
  .f-l-zw {
    margin-left: 23px;
    float: right;
    margin-right: 5px;
    line-height: 39px;
  }
  .f-l-zw a {
    text-decoration: none;
    color: blue;
    font-size: 14px;
  }
  .f-l-zw span {
    font-size: 12px;
  }
  .btn {
    width: 100%;
    height: 60px;
  }
  /* el-card__body */
  .box .el-card__body {
    padding: 10px;
  }
  .btn-c {
    margin: 0 auto;
    /* min-width: 1200px; */
    width: 100%;
    top: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
  /* .bao {
    padding-bottom: 55px;
  } */
  .nav-c-rt {
    height: 56px;
    float: right;
    margin-right: 1px;
  }
  .aniu {
    border: 1px solid #b3d8ff;
    color: #409eff;
    background: #ecf5ff;
    height: 30px;
    width: 70px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    margin: 13px 6px 0 0;
    float: right;
    display: none;
  }
  .aniu1 {
    border: 1px solid #b3d8ff;
    color: #409eff;
    background: #ecf5ff;
    height: 30px;
    width: 70px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    margin: 13px 6px 0 0;
    float: right;
  }
  .aniu:hover {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
  .aniu1:hover {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
  .side-top {
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    color: #409eff;
    background: #ecf5ff;
  }
  .side-top:hover {
    color: #fff;
    background-color: #409eff;
  }
  .sidebar {
    position: fixed;
    height: 52px;
    width: 50px;
    bottom: 160px;
    right: 30px;
    border: 1px solid #b3d8ff;
  }
  .Newjob_bg {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 30;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .Newjob_box {
    overflow: auto;
    position: fixed;
    top: 5%;
    left: 5%;
    z-index: 11;
    background-color: rgba(255, 255, 255);
    padding: 10px;
  }
  .upload-demo {
    margin-bottom: 10px;
  }
  .active {
    display: block;
  }
  .dle {
    display: none;
  }
  .sm {
    font-size: 12px;
    color: #999;
    float: left;
  }
  .f-sm {
    height: 20px;
    margin-top: 10px;
  }
  .money {
    font-size: 14px;
    color: #ff6000;
    float: right;
  }
}
</style>